<template>
  <div style="padding-top: 20px;">
    <el-divider content-position="left">OAuth2认证配置</el-divider>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form ref="myform" :model="formItem" :rules="rules" label-width="140px" size="mini">
          <el-form-item label="应用名称" prop="name">
            <el-input v-model="formItem.name" placeholder="海南资产管理平台" />
          </el-form-item>
          <el-form-item label="应用ID" prop="clientId">
            <el-input v-model="formItem.clientId" placeholder="6b3228fbdbedbf73ba72339e314a038ec3ff6f2eb7efcb4bd178356fe3730533" />
          </el-form-item>
          <el-form-item label="秘钥" prop="secretId">
            <el-input v-model="formItem.secretId" placeholder="8f2e3f14f4834881d3c782e26b06ad6776a2693575efc31a7ceaf04b5ccdeb00" />
          </el-form-item>
          <el-form-item label="OAuth2基础地址" prop="baseUrl">
            <el-input v-model="formItem.baseUrl" placeholder="http://10.0.65.218:8081" />
          </el-form-item>
          <el-form-item label="认证URI" prop="authorizeUri">
            <el-input v-model="formItem.authorizeUri" placeholder="/oauth/authorize" />
          </el-form-item>
          <el-form-item label="回调应用地址" prop="redirectUrl">
            <el-input v-model="formItem.redirectUrl" placeholder="http://localhost:9527" />
          </el-form-item>
          <el-form-item label="获取访问令牌URI" prop="accessTokenUri">
            <el-input v-model="formItem.accessTokenUri" placeholder="/oauth/token" />
          </el-form-item>
          <el-form-item label="获取用户信息URI" prop="userInfoUri">
            <el-input v-model="formItem.userInfoUri" placeholder="/api/v4/user" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
          <el-form-item label="">
            <div class="tip">
              <p>1. 以上参数可以从认证平台中获取</p>
              <p>2. 不同的认证平台参数可能不一致，大部分OAuth2认证都是差不多的</p>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { create, update, getConfig } from '@neu/auth-ui/api/oauth2'

// 定义一个表单原始项
const formItem = {
  id: '',
  name: '',
  clientId: '',
  secretId: '',
  baseUrl: '',
  authorizeUri: '',
  accessTokenUri: '',
  userInfoUri: '',
  redirectUrl: ''
}

export default {
  name: 'DingDingConfigForm',
  data() {
    return {
      formItem: {
        ...formItem
      },
      // 表单验证规则
      rules: {
        name: [
          { required: true, message: '应用名称不能为空', trigger: 'blur' }
        ],
        clientId: [
          { required: true, message: '应用ID不能为空', trigger: 'blur' }
        ],
        secretId: [
          { required: true, message: '秘钥不能为空', trigger: 'blur' }
        ],
        baseUrl: [
          { required: true, message: 'OAuth2基础地址不能为空', trigger: 'blur' }
        ],
        authorizeUri: [
          { required: true, message: '认证URI不能为空', trigger: 'blur' }
        ],
        accessTokenUri: [
          { required: true, message: '获取访问令牌URI不能为空', trigger: 'blur' }
        ],
        userInfoUri: [
          { required: true, message: '获取用户信息URI不能为空', trigger: 'blur' }
        ],
        redirectUrl: [
          { required: true, message: '回调应用地址不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    // 初始化表单数据
    fetch() {
      getConfig().then(response => {
        this.formItem = {
          ...response.data
        }
      })
    },
    // 保存操作，返回promise，后续处理交由调用者处理
    onSubmit() {
      return new Promise(resolve => {
        this.$refs.myform.validate((valid) => {
          if (valid) {
            if (this.formItem.id) {
              update(this.formItem.id, this.formItem).then(response => {
                this.showResult(response.status === 'success')
              })
            } else {
              create(this.formItem).then(response => {
                this.showResult(response.status === 'success')
              })
            }
          } else {
            resolve(false)
          }
        })
      })
    },
    showResult(isSuccess) {
      this.$message({
        showClose: true,
        message: isSuccess ? '保存成功' : '保存失败',
        type: isSuccess ? 'success' : 'error'
      })
    }
  }
}
</script>

<style>
  .tip {
    padding: 8px 16px;
    background-color: #ecf8ff;
    border-radius: 4px;
    border-left: 5px solid #50bfff;
    margin: 0 0;
  }
</style>
